<template>
  <view class="category">
    <navigator
      class="category-item"
      hover-class="none"
      @click="goPage(item)"
      v-for="item in list"
      :key="item.categoryId"
    >
      <image class="icon" :src="item.imageUrl"></image>
      <text class="text">{{ item.name }}</text>
    </navigator>
  </view>
</template>
<script setup lang="ts">
// 定义 props 接收数据
import { getAllChildIds } from '@/utils'
import { onMounted, ref } from 'vue'
import { getHomeCategoryAPI } from '@/services/home'

const categoryList = ref<any[]>([])
const props = defineProps<{
  list: any[]
}>()

const goPage = async (item: any) => {
  let childIds: any[] = getAllChildIds(
    item.categoryId,
    categoryList.value,
    'categoryId',
    'parentId',
  )
  childIds.push(item.categoryId)
  uni.navigateTo({
    url: `/pages/goods/list?categoryId=${childIds}&categoryLabel=${item.name}`,
  })
}
// 组件挂载完毕
onMounted(async () => {
  const res = await getHomeCategoryAPI({})
  categoryList.value = res.data
})
</script>

<style scoped lang="scss">
@import '../styles/category.scss';
</style>
